import * as echarts from 'echarts';
import { useEffect } from 'react';

export default ({ container, data }: any) => {
  const option = {
    title: {
      //   text: 'Referer of a Website',
      //   subtext: 'Fake Data',
      left: 'center',
    },
    tooltip: {
      trigger: 'item',
    },
    // legend: {
    //   orient: 'vertical',
    //   left: 'left',
    // },
    series: [
      {
        type: 'pie',
        radius: '50%',
        data,
        emphasis: {
          itemStyle: {
            shadowBlur: 10,
            shadowOffsetX: 0,
            shadowColor: 'rgba(0, 0, 0, 0.5)',
          },
        },
      },
    ],
  };

  const init = () => {
    const chartDom = document.getElementById(container);
    if (chartDom) {
      const myChart = echarts.init(chartDom);
      myChart.setOption(option);
    }
  };

  useEffect(() => {
    if (data) init();
  }, [container, data]);

  return <div id={container} style={{ height: '300px' }}></div>;
};
